<template>
  <div class="job">
    <div>
      <div class="title">
        <h1 style="color: #337ECC;font-size: 40px">{{title}}</h1>
        <div>
          <CopyOutlined class="icon"/>
          <UserOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 10px">


    <a-form
        ref="formRef"
        :label-col="labelCol"
        :model="formState"
        :rules="rules"
        :wrapper-col="wrapperCol"
    >
      <a-divider orientation="left">基本信息</a-divider>
      <a-row>
        <a-col :span="12">
          <a-form-item ref="job_title" :wrapperCol="{ span: 12 }" label="岗位标题" name="job_title">
            <a-input v-model:value="formState.job_title" :disabled="isQuery"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_location" :wrapperCol="{ span: 12 }" label="岗位地址" name="job_location">
            <a-input v-model:value="formState.job_location" :disabled="isQuery"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item ref="job_salary" :wrapperCol="{ span: 12 }" label="岗位薪资" name="job_salary">
            <a-input v-model:value="formState.job_salary" :disabled="isQuery"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item ref="job_status" :wrapperCol="{ span: 12 }" label="岗位状态"
                       name="job_status">
            <a-select v-model:value="formState.job_status" placeholder="选择岗位状态" :disabled="isQuery">
              <a-select-option value="开放">开放</a-select-option>
              <a-select-option value="关闭">关闭</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item ref="job_education_requirement" :wrapperCol="{ span: 12 }" label="岗位学历要求"
                       name="job_education_requirement">
            <a-input v-model:value="formState.job_education_requirement" :disabled="isQuery"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_major_requirement" :wrapperCol="{ span: 12 }" label="岗位专业要求"
                       name="job_major_requirement">
            <a-input v-model:value="formState.job_major_requirement" :disabled="isQuery"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_publish_date" :wrapperCol="{ span: 12 }" label="岗位发布日期"
                       name="job_publish_date">
            <a-date-picker
                v-model:value="formState.job_publish_date"
                :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_deadline" :wrapperCol="{ span: 12 }" label="岗位截至日期"
                       name="job_deadline">
            <a-date-picker
                v-model:value="formState.job_deadline"
                :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_contactinfo" :wrapperCol="{ span: 12 }" label="岗位联系方式"
                       name="job_contactinfo">
            <a-input v-model:value="formState.job_contactinfo" :disabled="isQuery"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="job_industry" :wrapperCol="{ span: 12 }" label="岗位所属行业"
                       name="job_industry">
            <a-select v-model:value="formState.job_industry" placeholder="岗位所属行业">
              <a-select-option value="互联网/AI">互联网/AI</a-select-option>
              <a-select-option value="服务业">服务/餐饮</a-select-option>
              <a-select-option value="医疗/制药">医疗/制药</a-select-option>
              <a-select-option value="教育/培训">教育/培训</a-select-option>
              <a-select-option value="金融/制造">金融/制造</a-select-option>
              <a-select-option value="游戏/电子">游戏/电子</a-select-option>
              <a-select-option value="网络社交/媒体">网络社交/媒体</a-select-option>
              <a-select-option value="房地产/建筑">房地产/建筑</a-select-option>
              <a-select-option value="零售/批发">零售/批发</a-select-option>
              <a-select-option value="其他行业">其他行业</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="job_experience_requirement" :wrapperCol="{ span: 12 }" label="岗位经验要求"
                       name="job_experience_requirement">
            <a-textarea v-model:value="formState.job_experience_requirement"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
                        :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="job_skill_requirement" :wrapperCol="{ span: 12 }" label="岗位技能要求"
                       name="job_skill_requirement">
            <a-textarea v-model:value="formState.job_skill_requirement"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
                        :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="job_description" :wrapperCol="{ span: 12 }" label="岗位职责" name="job_description">
            <a-textarea v-model:value="formState.job_description"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
                        :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="job_benefits" :wrapperCol="{ span: 12 }" label="岗位福利"
                       name="job_benefits">
            <a-textarea v-model:value="formState.job_benefits"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
                        :disabled="isQuery"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="!isQuery">
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <div style="display:flex;">
              <a-popconfirm title="你确定保存吗？" ok-text="确定" cancel-text="取消" @confirm="update">
                <a-button type="primary" style="width:200px">保存</a-button>
              </a-popconfirm>
              <a-button style="margin-left: 60px; width:200px" @click="goBack">返回</a-button>
              <a-popconfirm title="你确定重置吗？" ok-text="确定" cancel-text="取消" @confirm="resetForm">
                <a-button type="primary" danger style="margin-left: 60px; width:200px">重置</a-button>
              </a-popconfirm>


            </div>

          </a-form-item>
        </a-col>
        <a-col :span="24" v-else>
          <a-button style="margin-left: 60px; width:200px" @click="goBack">返回</a-button>
        </a-col>
      </a-row>
    </a-form>
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref, toRaw} from 'vue';
//返回
const router = useRouter();
const goBack = () => {
  router.go(-1); // -1 表示返回上一个页面
}

const formRef = ref();
const formState = reactive({
  jobId: '',
  job_title: '',
  job_location: '',
  job_salary: '',
  job_education_requirement: '',
  job_major_requirement: '',
  job_experience_requirement: '',
  job_skill_requirement: '',
  job_description: '',
  job_benefits: '',
  job_publish_date: '',
  job_deadline: '',
  job_contactinfo: '',
  job_status: undefined,
  job_industry: '',
  job_company_id: '',
});
const rules = {
  job_title: [
    {
      required: true,
      message: '岗位标题！',
      trigger: 'change',
    },
  ],
  job_location: [
    {
      required: true,
      message: '请输入岗位地址！',
      trigger: 'change',
    },
  ],
  job_salary: [
    {
      required: true,
      message: '请输入岗位薪资！',
      trigger: 'change',
    },
    {
      pattern: /^[1-9]\d*$/,  // 正则表达式校验是否为正整数（不包含0）
      message: '薪资必须是正整数',
      trigger: 'blur'  // 失去焦点时触发校验
    }
  ],
  job_education_requirement: [
    {
      required: true,
      message: '请输入岗位学历要求！',
      trigger: 'change',
    }
  ],
  job_major_requirement: [
    {
      required: true,
      message: '请输入岗位专业要求！',
      trigger: 'change',
    }
  ],
  job_experience_requirement: [
    {
      required: true,
      message: '请输入岗位工作经验要求！',
      trigger: 'change',
    }
  ],
  job_skill_requirement: [
    {
      required: true,
      message: '请输入岗位技能要求！',
      trigger: 'change',
    }
  ],

  job_description: [
    {
      required: true,
      message: '请输入岗位职责！',
      trigger: 'change',
    }
  ],
  job_benefits: [
    {
      required: true,
      message: '请输入岗位福利！',
      trigger: 'change',
    }
  ],
  job_publish_date: [
    {
      required: true,
      message: '请输入岗位发布日期！',
      trigger: 'change',
    }
  ],
  job_deadline: [
    {
      required: true,
      message: '请输入岗位截至日期！',
      trigger: 'change',
    }
  ],
  job_contactinfo: [
    {
      required: true,
      message: '请输入岗位联系方式！',
      trigger: 'change',
    }
  ],
  job_status: [
    {
      required: true,
      message: '请选择岗位状态！',
    }
  ],
  job_industry: [
    {
      required: true,
      message: '请输入所属行业！',
      trigger: 'change',
    }
  ],
};
//获取当前登录用户信息
import {useUserStore} from "@/stores/user.js";
import {addJobAPI, queryJobDetailByJobIdAPI, updateJobByIdAPI} from "@/apis/job.js";
import {message} from "ant-design-vue";
import {useRoute, useRouter} from "vue-router";
import moment from "moment";
import {CopyOutlined, UserOutlined} from "@ant-design/icons-vue";
import dayjs from "dayjs";
const useStore = useUserStore();
const update = () => {
  formRef.value
      .validate()
      .then(async () => {
        console.log('values', formState, toRaw(formState));
        formState.job_company_id = useStore.userInfo.userId;
        const res = await updateJobByIdAPI(formState);
        console.log(res);
        if(res.data.flag){
          success(res.data.message);
          // 设置一个定时器，在1秒后刷新页面
          setTimeout(() => {
            window.location.reload();
          }, 1000); // 1000毫秒 = 1秒
        }else{
          console.log('error submit!', toRaw(formState));
        }
      })
      .catch(error => {
        console.log('error', error);
      });
};

const success = (msg) => {
  message.success(msg);
};


const resetForm = () => {
  formRef.value.resetFields();
};
//获取数据
const getDate = async (jobId) => {
  const res = await queryJobDetailByJobIdAPI(jobId);
  formState.jobId = res.data.data.jobVO.jobId;
  formState.job_title = res.data.data.jobVO.jobTitle;
  formState.job_location = res.data.data.jobVO.jobLocation;
  formState.job_salary = res.data.data.jobVO.jobSalary;
  formState.job_education_requirement = res.data.data.jobVO.jobEducationRequirement;
  formState.job_major_requirement = res.data.data.jobVO.jobMajorRequirement;
  formState.job_experience_requirement = res.data.data.jobVO.jobExperienceRequirement;
  console.log(res.data.data.jobVO.jobExperienceRequirement)
  formState.job_skill_requirement = res.data.data.jobVO.jobSkillRequirement;
  formState.job_description = res.data.data.jobVO.jobDescription;
  formState.job_benefits = res.data.data.jobVO.jobBenefits;
  formState.job_publish_date =  dayjs(res.data.data.jobVO.jobPublishDate,'YYYY-MM-DD');
  console.log("时间"+formState.job_publish_date)
  formState.job_deadline =   dayjs(res.data.data.jobVO.jobDeadline,'YYYY-MM-DD');
  formState.job_contactinfo = res.data.data.jobVO.jobContactInfo;
  formState.job_status = res.data.data.jobVO.jobStatus;
  formState.job_industry = res.data.data.jobVO.jobIndustry;
  formState.job_company_id = res.data.data.jobVO.jobCompanyId;

}
//接收路由参数
const route = useRoute()
const jobId = ref();
const key= ref();
const isQuery= ref();
const title=ref()
// 生命周期
onMounted(() => {
  jobId.value = route.params.jobId;
  formState.jobId = route.params.jobId;
  key.value = route.params.name;
  //判断是否是查询
  if( key.value === 'query'){
   isQuery.value=true
    title.value = '查看岗位信息'
  }else{
   isQuery.value=false
    title.value = '编辑岗位信息'
  }
  //获取数据
  getDate(jobId.value);
});

</script>
<style lang="scss" scoped>
.job {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;
    //border-bottom: 15px solid #4D7181;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }
}
</style>
